<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'年度招商收入对比'"/>
        <div class="layChart" ref="jjrcldbRef"></div>
      </div>
      <div class="pd_abItems-contain">
        <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
        <div class="pd_abItems-main">
          <div v-for="(item,index) in abItems" :data-index="index" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
        </div>
        
        <el-date-picker
            v-model="jjrcldb_legend[0]"
            type="year"
            :disabled-date="disabledDate"
            placeholder="选择年份">
        </el-date-picker>
        <el-date-picker
            v-model="jjrcldb_legend[1]"
            type="year"
            :disabled-date="disabledDate"
            placeholder="对比年份">
        </el-date-picker>
        <div class="pd-abItem-search">
          <button class="pd-abItem-search-btn" @click="search">查询</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

// 禁用明年及以后的日期 以及 2024以前没数据
const disabledDate = (time) => {
  return time.getFullYear() > new Date().getFullYear() || time.getFullYear() < 2024; // 禁用明年及以后的日期 以及 2024以前的
};

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const search = function (){
  refreshData()
}

const currentYear = new Date().getFullYear();
// 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const jjrcldb_legend = ref([`2024`,`2023`]);
// const jjrcldb_legend = ref([`${thisYear}`,`${lastYear}`]);
const jjrcldb_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']);
const jjrcldb_y_1 = ref([12,14,15,11,15,17,16,21,14,13,20,18]);
const jjrcldb_y_2 = ref([14,10,13,17,25,15,11,12,13,17,15,21]);
// const jjrcldb_y_1 = ref([]);
// const jjrcldb_y_2 = ref([]);

const jjrcldbRef = ref();
const jjrcldbOpt = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jjrcldb_legend,
    right: '3%',
    top: '1%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '15%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick:{
      show: false
    },
    axisLabel: {
      interval:0,
      align: 'right',
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
    data: jjrcldb_x
  },
  yAxis: {
    type: 'value',
    name: "单位：万元",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      name: jjrcldb_legend.value[0],
      data: jjrcldb_y_1,
      type: 'line',
      smooth: true,
      barWidth: 8,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: "#0192FF"
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
    },
    {
      name: jjrcldb_legend.value[1],
      data: jjrcldb_y_2,
      type: 'line',
      smooth: true,
      barWidth: 8,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: "#F44438"
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(244,69,56,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0.1)'
          }
        ])
      },
    }
  ]
});

let jjrcldbChart;

onMounted(()=>{
  jjrcldbChart = drawLine(jjrcldbRef.value, jjrcldbOpt.value);
  // refreshData()
})


async function refreshData() {
  
}

</script>

<style scoped>
.dy-panel{
  position: fixed;
  top: 10vh;
  width: 100%;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 2vh;
      flex-wrap: wrap;
    }
  }
}
.pd_abItems-contain{
  display: flex;
  justify-content: center;
  margin-top: 1vh;
  .pd_abItems-main{
    display: flex;
    border: 1px solid #FFFFFF;
    margin-right: 2vh;
    .pd_abItem-item{
      padding: 0.5vh 1.2vh;
      border-right: 1px solid #FFFFFF;
      cursor: pointer;
      font-size: 1.4vh;
    }
    .selected{
      background: #35CB9C;
      border: 1px solid #35CB9C;
    }
  }
  .pd-abItem-search{
    margin-left: 1vh;
    .pd-abItem-search-btn{
      border: none;
      background: #35CB9C;
      padding: 0.5vh 1.2vh;
      color: #FFFFFF;
      cursor: pointer;
    }
  }
}

.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 12px;
  right: 1.4vh;
  top: 4.5vh;
  z-index: 1000;
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}
.yz-common-small-title{
  position: absolute;
  top: 10vh;
  right: 5vh;
  width: 100%;
}


:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 100px;
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}
:deep(.el-date-editor){
  width: auto;
  height: auto;
}
</style>
